<template>
  <div>
    <van-button
      style="position:fixed;top: 30px;right:0;z-index:999"
      type="primary"
    >loading:{{loading}}===finished:{{ finished }}===按钮</van-button>
    <van-list :finished="finished" @load="onLoad" finished-text="我是有底线的" v-model="loading">
      <van-cell :key="index" :title="item" v-for="(item,index) in list" />
    </van-list>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      loading: false,//加载状态 只要onLoad触发就会变成true
      finished: false,//不能上拉，到底了
    };
  },
  methods: {
    onLoad () {
      /* 初次进入也会触发，上拉就触发 */
      console.log('onLoad');

      /* 设置终止上拉条件 */
      if (this.list.length > 50) {
        this.finished = true//结束上拉，设置值为true就表示不能上拉了
        return
      }

      setTimeout(() => {
        for (var i = 0; i < 20; i++) {
          this.list.push(this.list.length + 1)
        }

        this.loading = false// 结束当前加载
      }, 3000)
    },
  },
};
</script>
<style lang='less'  scoped>
</style>